<template>
  <div v-loading="loading">
    <!--    <el-radio-group v-model="form.insidePage" @change="openInsidePageChange">
      <el-radio
        v-for="item in insideLinkSystemPageOptions"
        :key="item.key"
        :label="item.key"
      >{{ item.label }}
      </el-radio>
    </el-radio-group>-->
    <div class="table-container">
      <el-table
        :data="list"
        border
        stripe
        style="width: 100%"
        max-height="500"
        size="small"
        element-loading-text="加载中"
        empty-text="暂无数据"
      >
        <el-table-column prop="name" label="功能" />
        <el-table-column label="功能描述">
          <template slot-scope="scope">
            <div v-if="scope.row.code === 'CUSTOMER_SERVICE'">
              {{ scope.row.description }}操作流程可查看
              <span class="operBtn" @click="operBtn">操作详情</span>
            </div>
            <div v-else>{{ scope.row.description }}</div>
          </template>
        </el-table-column>
        <el-table-column label="选择" width="100">
          <template slot-scope="scope">
            <el-radio
              v-model="form.commonCode"
              :label="scope.row.code"
              @change="choose(scope.row)"
            >
              {{ form.commonCode === scope.row.code ? "已选" : "选择" }}
            </el-radio>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <CustomerOperation ref="customerOperationDialog" />
  </div>
</template>

<script>
import CustomerOperation from '../components/CustomerOperation'
import { getUrlQuery } from '@/utils/format'
import { getWxaEntrance } from '@/views/wxaNewBuildModule/api/config'
// import wxaBuildConfig from '@/views/wxaBuildModule/config'

export default {
  components: {
    CustomerOperation
  },
  props: {
    row: {
      type: Object
    }
  },
  data() {
    return {
      // 配置
      // insideLinkSystemPageOptions: [],
      // 状态
      loading: false,
      // 数据
      classifyCode: 'DEFAULT',
      form: {
        insidePage: null,
        commonCode: null
      },
      list: [
        // {
        //   name: '首页',
        //   code: 'PUB_HOME_PAGE',
        //   pageType: 4,
        //   pageId: '1589952821392834560',
        //   pagePath: 'pages/home/index'
        // },
        // {
        //   name: '个人中心',
        //   code: 'PUB_USER_CENTER',
        //   pageType: 3,
        //   pageId: '1586992354802270208',
        //   pagePath: 'pages/mine/index?needAuth=true'
        // },
        // {
        //   name: '订单',
        //   code: 'PUB_ORDER',
        //   pageType: 5,
        //   pageId: '1587765121071972352',
        //   pagePath:
        //     'pages/sp-order/pages/store-order-list/index?isShowTabbar=true&needAuth=true'
        //   // pagePath: `pages/mine/index?needAuth=${true}`
        // }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // this.insideLinkSystemPageOptions =
    //     wxaBuildConfig[this.classifyCode].insideLinkSystemPage
    // this.form.insidePage = this.row.insidePage
    this.form.commonCode = this.row.insideParams.commonCode
    this.fetchData()
  },
  methods: {
    /**
     * 数据组
     */
    async fetchData() {
      const { code, data } = await getWxaEntrance({
        type: 2,
        status: 1
      })
      if (code === 0 && data.length > 0) {
        this.list = data
      }
      console.log('系统页面列表', data)
    },
    /**
     * 按钮组
     */
    // 选择
    choose(row) {
      const query = getUrlQuery(row.pagePath)
      console.log('系统页面', row, query)
      const params = {
        insidePage: row.name,
        path: row.pagePath,
        mode: 'navigateTo',
        insideParams: {
          insidePageType: 'SYSTEMPAGE',
          commonCode: row.code,
          pageId: query.pageId,
          remark: '站内链接 > 系统页面 > ' + row.name
        }
      }
      this.$emit('selectInsideLink', { type: 'SYSTEMPAGE', params })
    },
    // 操作详情
    operBtn() {
      this.$refs.customerOperationDialog.open({ roleType: 'wx_kf' })
    }
    /**
     * 状态组
     */
    // openInsidePageChange改变
    // openInsidePageChange(val) {
    //   let params = {}
    //   this.insideLinkSystemPageOptions.some((v) => {
    //     if (this.form.insidePage == v.key) {
    //       params = {
    //         insidePage: v.key,
    //         path: v.openPath,
    //         mode: v.openMode,
    //         insideParams: {
    //           insidePageType: 'SYSTEMPAGE',
    //           remark: '站内链接 > 系统页面 > ' + v.label
    //         }
    //       }
    //       return true
    //     }
    //   })
    //   this.$emit('selectInsideLink', { type: 'SYSTEMPAGE', params })
    // }
    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-radio {
  display: block;
  height: 40px;
  line-height: 40px;
}

.el-radio + .el-radio {
  margin-left: 0;
}
.operBtn {
  color: #409eff;
  cursor: pointer;
}
</style>
